<template>
  <!--故障管理--故障列表-->
  <div class="content-area">
    <!-- 位置模块 -->
    <HeadTop></HeadTop>
    <div class="search-area">
      <div class="search-content">
        <div class="search-item"><span>注册代码:</span>
          <el-input placeholder="请输入内容" v-model="searchMsg.elCode" clearable></el-input>
        </div>
        <div class="search-item">
          <unit-data @curName="get" @setStatus="set" :childName="parentName" :searchType="1"
                     @setInputEmpty="setInputEmpty"></unit-data>
        </div>
        <div class="search-item">
          <span>故障状态:</span>
          <el-select v-model="searchMsg.aduitStatus" placeholder="请选择">
            <el-option
              v-for="item in searchData.statusArr"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="search-item search-time">
          <span>开始日期:</span>
          <el-date-picker v-model="searchMsg.startDate" align="right" type="date" placeholder="选择开始日期"
                          value-format='yyyy-MM-dd'>
          </el-date-picker>
        </div>
        <div class="search-item search-time"><span>结束日期:</span>
          <el-date-picker v-model="searchMsg.endDate" align="right" type="date" placeholder="选择结束日期"
                          value-format='yyyy-MM-dd'>
          </el-date-picker>
        </div>
        <areaSelect v-on:getNowAreaPosition="getArea" :areaText="areaText"></areaSelect>
      </div>
      <div class="search-footer">
        <button class="search-btn" @click="searchFaultListsData">查询</button>
      </div>
    </div>

    <!--内容-->
    <div class="main-content">
      <div class="content-info">
        <!-- 111:表格数据与翻页合并模块 -->
        <DataTable :dataTableObj="dataTableObj" :childLoad="parentLoad" v-on:getPageNo="searchByPageNo" v-on:handlePageReload="pageReload"
                   v-on:getPageSize="searchByPageSize">
          <!--操作-->
          <div slot="operate">
            <div class="some-operate">
              <!--<button class="some-btn">导出</button>-->
            </div>
          </div>
          <!-- 额外的操作以及其他因素 -->
          <div>
            <el-table-column fixed="right" align="center" label="操作" width="70">
              <template slot-scope="scope">
                <div class="item-route">
                  <div class="item-route-link" v-for="(item ,index ) in childLink" v-if="pagePower['003001001']"
                       @click="$goRoute( item.route +'?id='+ scope.row.id)">{{item.text}}
                  </div>
                </div>
              </template>
            </el-table-column>
          </div>

        </DataTable>
      </div>
    </div>
  </div>
</template>
<script>
  import moment from 'moment'  // 时间格式转化
  // 表格数据
  import DataTable from "../../../components/dataTable/dataTable"
  import areaSelect from "../../../components/areaSelect/areaSelect"
  import com from '../../../js/common'
  import HeadTop from "../../../components/head-top/head-top"
  import unitData from "../../../components/unitData/unitData" // 维保单位/物业单位(建议输入数据显示)
  import {getFaultList} from '@/api/getData'

  export default {
    name: 'serviceLists',
    components: {
      DataTable,
      areaSelect,
      HeadTop,
      unitData
    },
    data() {
      return {
        pagePower: JSON.parse(com.getStore('pagePowers'))['003001'] ? JSON.parse(com.getStore('pagePowers'))['003001'] : {}, // 权限
        parentLoad: '加载中...',    // 加载状态
        parentName: "维保单位",  // 父组件名称(维保单位或者物业单位)
        // 区域选择
        areaText: '区域选择:',
        searchData: {   // 前端定义的字段
          elCode: '',   					// 注册代码
          elMaintaimId: '',    // 维保单位
          aduitStatus: '',       // 故障状态
          statusArr: [
            {
              value: '',
              label: '全部状态'
            },
            {
              value: '1',
              label: '未受理'
            },
            {
              value: '2',
              label: '已受理'
            },
            {
              value: '3',
              label: '需要维修'
            },
            {
              value: '4',
              label: '不需要维修'
            }
          ],
          startDate: '',      // 开始时间
          endDate: '',         // 结束时间
          elAreaCode: ''       // 区域CODE
        },
        // 查询条件
        //子页面信息
        childLink: [
          {
            route: '/manage/faultMgr/faultLists/faultDetail',
            text: '查看详情'
          }
        ],
        //  111:表格组件数据
        dataTableObj: {
          // 表格数据
          tableData: [],
          // 表格标题
          tableColumns:
            [
              {
                text: '序号',
                width: '40',
                attributeName: 'index'
              },

              {
                text: '注册代码',
                width: '100',
                attributeName: 'elCode'
              },
              {
                text: '电梯类型',
                width: '60',
                attributeName: 'elTypeName'
              },
              {
                text: '维保单位',
                width: '130',
                attributeName: 'elMaintaimName'
              },
              {
                text: '故障上报时间',
                width: '100',
                attributeName: 'createDate'
              },
              {
                text: '维修责任人',
                width: '60',
                attributeName: 'maintainUserName'
              },
              {
                text: '故障来源',
                width: '80',
                attributeName: 'troubleFrom' /** 故障来源 1-物业上报 2-业主上报 3-巡检上报 4-维保上报 */
              },
              {
                text: '安装地址',
                width: '160',
                attributeName: 'elAddress'
              },
              {
                text: '状态',
                width: '60',
                attributeName: 'aduitStatus'
              },
            ],
          // 翻页的数据
          pageObj:
            {
              // 每页分为几条数据
              pageSize: 10,
              // 总共多少数据
              pageNum: 0,
              pageNo: 1,
              searchStatus: 2,
            },
        },
        searchMsg: { // 后台查询条件(后台所需要的字段)
          elCode: '',           // 注册代码
          maintainDepCode: '',   // 维保单位名称
          aduitStatus: '',      // 故障状态
          startDate: '',        // 开始时间
          endDate: '',          // 结束时间
          elAreaCode: ''        // 区域选择
        }
      }
    },
    created() {
      // 获取当前页面所需数据
      this.getFaultListsData()

    },
    mounted() {

    },
    methods: {

      get(msg) { // 获取到子组件的数据
        this.searchMsg.maintainDepCode = msg
      },
      set() {
        this.searchMsg.maintainDepCode = -1
      },
      // 前后信息不同时置空查询条件
      setInputEmpty() {
        this.searchMsg.maintainDepCode = ''
      },
      // 获取页面所需数据
      getFaultListsData(obj) {

        this.dataTableObj.pageObj.searchStatus = 2
        let self = this;
        getFaultList({
          pageNo: self.dataTableObj.pageObj.pageNo,
          pageSize: self.dataTableObj.pageObj.pageSize,
          condition: self.searchMsg
        }).then(function (data) {

          self.dataTableObj.pageObj.searchStatus = 1  // 查询成功
          let info = data.data.data
          let infoArr = info.data

          if (infoArr.length > 0) {
            infoArr.forEach((i, t) => {
              i.index = (t + 1) + self.dataTableObj.pageObj.pageSize * (self.dataTableObj.pageObj.pageNo - 1)
            });
            const statusObj = {'1': '未受理', '2': '已受理', '3': '需要维修', '4': '不需要维修'}
            infoArr.forEach((i, t) => { // t为索引,i为具体的值   (改变tablelist显示值)
              i.createDate = moment.unix(i.createDate / 1000).format('YYYY-MM-DD HH:mm:ss') // 故障上报时间
              i.aduitStatus = statusObj[i.aduitStatus]
            })
          } else {
            self.parentLoad = '暂无数据'    // loading(暂无数据)
          }
          self.dataTableObj.tableData = infoArr
          self.dataTableObj.pageObj.pageNum = info.totalRecord

        }).catch(function (data) {
          self.parentLoad = data.data.message    // loading(查询失败)
          self.dataTableObj.pageObj.searchStatus = 0  // 查询失败
        })
      },

      // 每页多少内容
      searchByPageSize(val) {
        this.dataTableObj.pageObj.pageSize = val;
        this.getFaultListsData()
      },
      // 切换第几页
      searchByPageNo(val) {
        this.dataTableObj.pageObj.pageNo = val
        // 切换每页数目
        this.getFaultListsData()
      },
      getArea(res) {
        if (typeof(res) == 'object' && typeof(res.code) != 'undefined') this.searchData.elAreaCode = res.code
      },

      searchFaultListsData() {
        // 跳出查询等待框
        if (moment(this.searchData.endDate).isBefore(this.searchData.startDate)) {
          this.$message('开始时间应小于结束时间')
          return
        }
        this.getFaultListsData()
      },

      // 页面刷新
      pageReload(){
        this.getFaultListsData();
      }

    }
  }
</script>
<style lang="scss" type="text/scss">
  @import "../../../style/entry/components/pageCommon";
</style>
